<script lang="ts">
//目的是要缓存该组件
export default {
  name: 'Home'
}
</script>
<script setup lang="ts">
import { getBannerListFn, getNavListFn, getProrListFn } from '@/api/home'
import { onMounted, reactive, computed, onActivated, onDeactivated } from 'vue'
import type { iState } from '@/types/homeType'
// 正常的商品
import pro1 from '@/components/pro1.vue';
// 卡片的商品
import pro2 from '@/components/pro2.vue';

//上拉加载数据
import { ref } from 'vue';
import type { Ref } from 'vue'
import { BackTop } from 'vant';
//数组 是引用类型 reactive 需要单独声明类型 如果是对象也可以像ref那样直接写
const state: iState = reactive({
  bannerList: [],
  navList: [],
  proList: [],
  xianshi: true,
  iconName: 'bars',
})
const loading: Ref<boolean> = ref(false);//是否处于加载状态
const finished: Ref<boolean> = ref(false)//	是否已加载完成
const count: Ref<number> = ref(2);
function onLoad() {
  console.log(1111111111111);

  loading.value = true
  getProrListFn({ count: count.value, limitNum: 10 }).then(res => {
    console.log(state.proList);

    if (res.data.length == 0) {
      finished.value = true
      return
    }
    count.value++
    loading.value = false
    state.proList = [...state.proList, ...res.data]//合并数据
  })
}


onMounted(() => {
  //获取轮播图   自定义页码未写
  getBannerListFn().then(res => {
    console.log(res.data);
    state.bannerList = res.data
  })
  //获取宫格 要用响应式写
  state.navList = getNavListFn()
  //获取商品数据
  getProrListFn({ count: 1, limitNum: 10 }).then(res => {
    state.proList = res.data
    console.log(222, res.data);

  })

})
//切换按钮 切换图标和显示形式 上图下文和左图右文
function switch1() {
  state.xianshi = !state.xianshi
  state.iconName = state.iconName == 'bars' ? 'list-switching' : 'bars'
}

//下拉刷新
// import { ref } from 'vue';
// import { showToast } from 'vant';
const count1 = ref(0);
const loading1 = ref(false);
// const onRefresh = () => {
//   setTimeout(() => {
//     showToast('刷新成功');
//     loading1.value = false;
//     count1.value++;
//   }, 1000);
// }
function onRefresh() {
  loading1.value = false;
  count1.value++;
  //数显获取商品数据
  getProrListFn({ count: 1, limitNum: 10 }).then(res => {
    state.proList = res.data
    count.value = 2
  })
}
// import { useUserStore } from '@/stores/user'
// import { useRouter } from 'vue-router';
// const router=useRouter()
// const user = useUserStore()
// function logOutClick() {
//   user.changeUserState({
//     token: '',
//     userid: '',
//     isLogin: false
//   })
//   router.push('/')
// }


//___---------——————————————————————________返回顶部
const contentRef: any = ref()
function backTop() {
  // 在 setup 中不能使用 this,所以我们需要直接定义一个 ref 属性，该属性和
  // 设置在 DOM 上的属性名字要保持一致，DOM 在设置的时候千万不要加 :
  // console.log(this.$refs.contentRef);

  console.log(contentRef.value);
  //找到需要滚动的标签，然后把滚动距离改到0  为了展示效果更好看，加个动画 在app.vue 的样式的content加入平滑滚动实现动画效果。
  contentRef.value.scrollTop = 0
}
//监听页面的滚动距离
const top: Ref<number> = ref(0)
function scrollTop(event: any) {
  console.log(event.target.scrollTop);//获取到滚动距离

  top.value = event.target.scrollTop
}
//——————————————————————缓存组件的滚动距离
//当组件缓存后，被加入显示的时候调用
onActivated(() => {
  //3.获取到保存的滚动距离
  // console.log(Number(localStorage.getItem('top')));c
  //4.将滚动距离设置在页面的content上面
  contentRef.value.scrollTop=Number(localStorage.getItem('top'))
  //5.清除保存的滚动距离
  localStorage.removeItem('top')

})
// 当组件被离开的时候调用
onDeactivated(() => {
  // 1. 获取到当前滚动距离
  console.log(top.value);

  // 2. 将滚动距离记录下来
 localStorage.setItem('top',String(top.value))

})


</script>
<template>
  <main class="box">
    <header class="header">
      <div></div>
      <div>头部-首页</div>
      <div>
        <!-- <van-button v-if="user.isLogin" size="small" @click="logOutClick">退出登陆</van-button>
        <van-button v-else="!user.isLogin" @click="$router.push('/login')">未登陆</van-button> -->
      </div>

    </header>
    <!-- 设置 ref 的时候不要加 : -->
    <div class="content" @scroll="scrollTop" ref="contentRef">

      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="loading1" success-text="刷新成功" @refresh="onRefresh">
        <!-- <p>刷新次数: {{ count1 }}</p> -->

        <!-- banner -->
        <BannerCom :banlist="state.bannerList"></BannerCom>

        <!-- 自定义指示器  css样式有点问题！！！ -->
        <!-- <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template> -->

        <!-- grid -->
        <gridCom :gridList="state.navList"></gridCom>


        <!-- 上拉加载数据 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- <van-cell v-for="item in state.proList" :key="item.proid" /> -->
          <!-- 父传子 值 defineProps接收参数 -->
          <!-- 商品 卡片形式-->
          <pro1 v-if="state.xianshi" :proList="state.proList"></pro1>
          <!-- 商品 正常形式 -->
          <pro2 v-else :proList="state.proList"></pro2>
        </van-list>


      </van-pull-refresh>
      <!-- 组件的回到顶部写法 -->
      <!-- <van-back-top right="10vw" bottom="10vh" /> -->
      <!-- 回到顶部 -->
      <div v-show="top>300" class="back-top" @click="backTop">
        <van-icon size="26" name="back-top" />
      </div>
      <!-- 切换卡片形式 -->
      <van-icon size="30" :name="state.iconName" class="change" @click="switch1" />
    </div>
  </main>
</template>
<style lang="scss" scoped>
.header {
  display: flex;

  div {
    flex: 1;

    .van-button {
      margin: 0;
      padding: 0;
    }
  }
}

.back-top {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgb(25, 137, 250);
  border-radius: 50%;
  right: 6vw;
  bottom: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.change {
  position: fixed;
  right: 22vw;
  bottom: 10vh;
  // font-size: 0.4rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  background-color: rgb(25, 137, 250);
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>